<template>
  <div>
    <!-- 搜索部分 -->
    <el-card shadow="always" class="ml10 mb10 mt10 ml10">
      <el-row :gutter="12">
        <el-col :span="4">
          <el-form-item label="桌号">
            <el-input v-model="searchData.num" placeholder="桌号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="点单人">
            <el-input
              v-model="searchData.people"
              placeholder="点单人"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="时间">
            <el-input v-model="searchData.time" placeholder="时间"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="search">查询</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-col>
      </el-row>
    </el-card>
    <!-- 新增按钮 -->
    <el-button type="primary" @click="handleAdd" class="ml10">开台</el-button>
    <!-- 表格 -->
    <el-card shadow="always" class="ml10 mb10 mt10 ml10">
      <el-row :gutter="12">
        <el-table
          :data="tableData.list"
          border
          style="width: 100%; height: 630px"
          line-height="50px"
        >
          <el-table-column type="index" label="序号" width="180">
          </el-table-column>
          <el-table-column prop="num" label="桌号"> </el-table-column>
          <el-table-column prop="people" label="点单人"> </el-table-column>
          <el-table-column label="时间">
            <template #default="scoped">
              <span>{{ parseTime(scoped.row.create_time) }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="scoped">
              <el-button
                type="primary"
                size="small"
                @click="handleEdit(scoped.row)"
              >
                修改
              </el-button>
              <el-button
                type="danger"
                size="small"
                @click="deleteClick(scoped.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="18"> </el-col>
        <el-col :span="6">
          <el-pagination
            :page-size="searchData.pageSize"
            :size="searchData.pageNum"
            :background="false"
            layout="total, prev, pager, next"
            :total="tableData.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-col>
      </el-row>
    </el-card>
    <!-- 弹框 -->
    <el-dialog :title="dialogTitle" v-model="dialogFormVisible">
      <el-form :model="formData" :rules="rules" ref="ruleFormRef">
        <el-form-item label="桌号" :label-width="formLabelWidth" prop="num">
          <el-input
            v-model="formData.num"
            autocomplete="off"
            type="number"
            placeholder="桌号"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="点单人"
          :label-width="formLabelWidth"
          prop="people"
        >
          <el-input v-model="formData.people" placeholder="点单人"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel(ruleFormRef)">取 消</el-button>
        <el-button type="primary" @click="onSubmit(ruleFormRef)"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script setup name="UserTest">
import { ref, reactive, onMounted, nextTick } from 'vue'
import {
  getList,
  creatItem,
  deleteItem,
  editItem,
  getOne,
} from '@/api/test_menu/index'
import { listtable, addtable } from '@/api/sku/sku.js'
import { ElMessageBox, ElMessage } from 'element-plus'
onMounted(() => {
  geTableList()
  getListTest()
})
const getListTest = async () => {
  let params = {
    skuName: '',
    price: '',
    quantity: '',
    pageNum: 1,
    pageSize: 10,
  }
  let res = await listtable(params)
  console.log(res, 623784627893)
}
const formData = reactive({
  num: null,
  people: '',
  time: '',
  testMenuId: '',
})
const ruleFormRef = ref()
const searchData = reactive({
  num: null,
  people: '',
  pageNum: 1,
  pageSize: 10,
})
const rules = ref({
  num: [{ required: true, message: '桌号号不能为空', trigger: 'blur' }],
  people: [{ required: true, message: '点单人不能为空', trigger: 'blur' }],
})
const dialogFormVisible = ref(false)
const formLabelWidth = '120px'
const tableData = reactive({
  list: [],
  total: 0,
})
const dialogTitle = ref('新增桌号')

//获取列表
const geTableList = async () => {
  let params = {
    num: searchData.num,
    people: searchData.people,
    create_time: searchData.time,
    pageNum: searchData.pageNum,
    pageSize: searchData.pageSize,
  }
  let res = await getList(params)
  tableData.list = res.data.list
  tableData.total = res.data.total
}
//点击搜索
const search = () => {
  geTableList()
}
//点击新增
const handleAdd = () => {
  dialogTitle.value = '新增桌号'
  dialogFormVisible.value = true
}
//点击提交
const onSubmit = async (ruleFormRef) => {
  ruleFormRef.validate(async (valid, fields) => {
    if (valid) {
      dialogFormVisible.value = false
      let params = {
        num: Number(formData.num),
        people: formData.people,
      }
      if (dialogTitle.value == '修改桌号') {
        let query = {
          num: Number(formData.num),
          people: formData.people,
          testMenuId: formData.testMenuId,
        }
        await editItem(query)
        geTableList()
        formData.num = ''
        formData.people = ''
        formData.testMenuId = ''
      } else {
        await creatItem(params)
        geTableList()
        formData.num = ''
        formData.people = ''
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
//点击删除
const deleteClick = (row) => {
  ElMessageBox.confirm('你确定要删除吗?', '提示!', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    await deleteItem(row.testMenuId)
    geTableList()
    ElMessage({
      type: 'success',
      message: '删除成功 !',
    })
  })
}
const handleEdit = async (row) => {
  console.log(row)

  // 编辑代码...
  let res = await getOne(row.testMenuId)
  // console.log(formData.num)
  formData.num = res.data.num
  formData.people = res.data.people
  formData.testMenuId = res.data.testMenuId
  dialogTitle.value = '修改桌号'
  dialogFormVisible.value = true
}
const cancel = (formData) => {
  formData.resetFields()
  dialogFormVisible.value = false
}

//点击每页数量
const handleSizeChange = async (size) => {
  searchData.pageSize = size
  geTableList()
}
//点击页码
const handleCurrentChange = async (currentPage) => {
  searchData.pageNum = currentPage
  geTableList()
}
//点击重置
const reset = () => {
  searchData.num = ''
  searchData.people = ''
  searchData.time = ''
  geTableList()
}
</script>

<style lang="less" scoped></style>
